﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="ProductDetail.aspx.cs" Inherits="SES.CMS.ProductDetail" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Src="Module/AddButton.ascx" TagName="AddButton" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%--    <script src="js/jquery.msgBox.js" type="text/javascript"></script>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <link href="css/msgBoxLight.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
        
            $('a.tab').click(function () {
                $('.active').removeClass('active');
                $(this).addClass('active');
                $('.contents').slideUp();
                var content_show = $(this).attr('title');
                $('#' + content_show).slideDown();
            });
        });

    </script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="contentright">
        <div class="detail">
            Trang chủ / Sản phẩm /
            <asp:Literal ID="lblTitleParent" Text="" runat="server" />
            /
            <asp:Literal ID="ltProductTitle" Text="" runat="server" />
        </div>
        <!--End .detail-->
        <div class="productdetail">
            <div class="t-product-detail-wrap">
                <div class="t-l-images-product-wrap">
                    <div style="width: 480px; float: left;" class="zoom-container">
                        <div class="zoom-section">
                            <a href='/Media/<%=imageProduct %>' id='zoom1' class='cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0"
                                title='<%#Eval("Title") %>'>
                                <img src="/Media/<%=imageProduct %>" title="Topbike" class="product-images-box" alt='<%#Eval("ProductTitle") %>'>
                            </a>
                        </div>
                    </div>
                    <div class="clearfix">
                        <ul id="thumblist" class="clearfix">
                            <li><a href='/Media/<%=imageProduct %>' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: '/Media/<%=imageProduct %>' ">
                                <img class="zoom-tiny-image" src='/Media/Thumbnail/<%=Thumbnail %>' alt="Thumbnail 1" /></a>
                            </li>
                            <asp:Repeater ID="listImage" runat="server">
                                <ItemTemplate>
                                    <li><a href='/Media/<%#Eval("MediaFile") %>' class='cloud-zoom-gallery' title='<%#Eval("Title") %>'
                                        rel="useZoom: 'zoom1', smallImage: '/Media/<%#Eval("MediaFile") %>' ">
                                        <img class="zoom-tiny-image" src='/Media/Thumbnail/<%#Eval("Thumbnail") %>' alt="Thumbnail 1" />
                                    </a></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </div>
                </div>
                <div class="detailtext" style="position: relative;">
                    <ul>
                        <li>
                            <h2>
                                <asp:Literal ID="lblTitle" Text="" runat="server" /></h2>
                        </li>
                        <li>
                            <div class="detail-price">
                                <asp:Label ID="lbCost" runat="server" />
                            </div>
                        </li>
                        <li>
                            <div class="detail-left">
                                Mã sản phẩm
                            </div>
                            <div class="detail-right">
                                <asp:Label ID="lbId" runat="server" />
                            </div>
                        </li>
                        <li>
                            <div class="detail-left">
                                Hãng sản xuất</div>
                            <div class="detail-right">
                                <asp:Label ID="lbXuatxu" runat="server" />
                            </div>
                        </li>
                        <li>
                            <div class="detail-left">
                                Tình trạng
                            </div>
                            <div class="detail-right">
                                <asp:Label ID="lbStatus" runat="server" />
                            </div>
                        </li>
                        <li>
                            <div class="detail-left">
                                Màu sắc</div>
                            <div class="detail-right">
                                <asp:Repeater runat="server" ID="rptColor">
                                    <ItemTemplate>
                                        <div class="color-div">
                                            <a href='/Media/<%#Eval("Image") %>' class='cloud-zoom-gallery colorx' style='background: <%#Eval("Color")%>'
                                                title='color' rel="useZoom: 'zoom1', smallImage: '/Media/<%#Eval("Image") %>' "></a>
                                        </div>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </li>
                        <li>
                            <div class="detail-left">
                                Bảo hành
                            </div>
                            <div class="detail-right">
                                <asp:Label ID="lblWarranty" runat="server" />
                            </div>
                        </li>
                        <li>
                            <div class="hd-box">
                                <div class="hd-left">
                                    <a href='/noi-dung/Huong-dan-mua-hang-online-6' class="myButton-hd">Hướng dẫn mua hàng</a>
                                </div>
                                <div class="hd-right">
                                    <asp:Literal runat="server" ID="ltrHuongDan">
                            
                                    </asp:Literal>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div id="button-face" class="product-social-box">
                                <uc1:AddButton ID="AddButton1" runat="server" />
                            </div>
                        </li>
                    </ul>
                    <div class="cart-detail-box">
                        <div class="detail-left-x">
                            <span class="detail-left-x-span">Số lượng</span></div>
                        <div class="detail-right-x">
                            <telerik:RadNumericTextBox ID="txtQty" Value="1" ClientIDMode="Inherit" MinValue="1" MaxValue="10" Type="Number"
                                NumberFormat-DecimalDigits="0" Width="70px" CssClass="txtQty" ShowSpinButtons="true"
                                BorderColor="#ccc" runat="server">
                            </telerik:RadNumericTextBox>
                        <%--    <asp:Button ID="button" Text="ĐẶT MUA" CssClass="myButton" runat="server" OnClick="btnCart_Click" />--%>
                        <input type="button" id="btnCart" value="ĐẶT MUA" class="myButton" onclick="updateCart(<%=idProduct%>,<%= txtQty.ClientID %>.value); return false;"  />
                        </div>
                    </div>
                    <br />
                </div>
            </div>
            <ul>
                <li class="newproduct">
                    <div class="tabbed_area">
                        <ul class="tabs">
                            <li><a href="javascript:void(0);" title='news' class="active tab">Giới thiệu </a>
                            </li>
                            <li><a href="javascript:void(0);" title='featured' class=" tab">Chi tiết</a></li>
                            <li><a href="javascript:void(0);" title='comment-fb' class="tab">Nhận xét</a></li>
                            <li><a href="javascript:void(0);" title='album-detail' class="tab">Hình ảnh-video</a></li>
                        </ul>

                         <div id="news" class="contents">
                            <div class="info">
                                <ul style="padding: 10px 20px; font-size: 12px; line-height: 24px;" id="infoAbout"
                                    runat="server">
                                </ul>
                            </div>
                        </div>
                        <div id="featured" class="contents">
                            <div class="info">
                                <ul style="padding: 10px 50px; font-size: 12px; line-height: 24px;" class="ul-detail-pro">
                                    <asp:Repeater runat="server" ID="rptProductProperties">
                                        <ItemTemplate>
                                            <li><span class="pro-left">
                                                <%#Eval("PropertyName") %></span> <span class="pro-right">
                                                    <%#Eval("Value") %></span> </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                       
                        <div class="clear">
                        </div>
                        <div id="comment-fb" class="contents">
                            <div class="info">
                                <div class="fb-comments" id="cmfb" runat="server" data-num-posts="10" data-width="730"
                                    data-colorscheme="light">
                                </div>
                                <%--<div class="fb-comments"  data-width="720" data-num-posts="10" data-colorscheme="light"></div>--%>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                        <div id="album-detail" class="contents">
                            <div class="album-product-detail-box">
                                <div id="slider" class="flexslider">
                                    <ul class="slides">
                                        <asp:Repeater runat="server" ID="rptMainImage">
                                            <ItemTemplate>
                                                <li>
                                                    <img src='/Media/<%#Eval("MediaFile")%>' width="650px" height="500px" />
                                                </li>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                        <!-- items mirrored twice, total of 12 -->
                                    </ul>
                                </div>
                                <div id="carousel" class="flexslider">
                                    <ul class="slides">
                                        <asp:Repeater runat="server" ID="rptThumbnail">
                                            <ItemTemplate>
                                                <li>
                                                    <img src='/Media/thumbnail/<%#Eval("Thumbnail") %>' width="200px" height="154px" />
                                                </li>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                        <!-- items mirrored twice, total of 12 -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                    <!--end .tabbed_area-->
                </li>
            </ul>
            <ul id="other" runat="server">
                <li class="newproduct">
                    <div class="heading">
                        <div class="heading1">
                            <h2 class="heading2">
                                <span>SẢN PHẨM CÙNG LOẠI</span></h2>
                        </div>
                    </div>
                    <div class="foo-news">
                        <asp:Repeater ID="rpListProduct" runat="server" OnItemCommand="rpListProduct_ItemCommand">
                            <ItemTemplate>
                                <div class="product">
                                    <a class="a-hover" href='/<%#FriendlyUrl(Eval("ProductCategoryTitle").ToString()) %>/<%#FriendlyUrl(Eval("ProductTitle").ToString())%>-<%#Eval("ProductID")%>'
                                        title='<%#Eval("ProductTitle") %>'>
                                        <img src='/Media/<%#Eval("ProductImage")%>' alt='<%#Eval("ProductTitle") %>' title='<%#Eval("ProductTitle") %>' />
                                        <div class="product-no-promotion">
                                            <p class="hidden p-title">
                                                <%#Eval("ProductTitle") %></p>
                                            <p class="hidden p-price">
                                                <%#SES.CMS.Ultility.GetPrice(Eval("ProductID")) %>
                                        </div>
                                    </a>
                                    <div class="action-product">
                                        <div class="product-button">
                                            <a href='/<%#FriendlyUrl(Eval("ProductCategoryTitle").ToString()) %>/<%#FriendlyUrl(Eval("ProductTitle").ToString())%>-<%#Eval("ProductID")%>'
                                                title='<%#Eval("ProductTitle") %>' class="detail-product">Chi tiết</a>
                                           <%-- <asp:Button runat="server" ID="button" CssClass="h-btn-cart" CommandArgument='<%#Eval("ProductID") %>'
                                                CommandName="AddToCart" />--%>
                                                 <input type="buttonx" id="btnCart" class="h-btn-cart" onclick="updateCart(<%#Eval("ProductID")%>,1); return false;"  />
                                        </div>
                                    </div>
                                    <span style='display: <%#Boolean.Parse(Eval("IsPromotion").ToString())==true?"block":"none"%> !important'
                                        class="promotion-product-span">KM</span>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <div class="clear">
                    </div>
                </li>
            </ul>
            <%-- <ul id="pkdc" runat="server" style="display:none;">
                <li class="newproduct">
                    <div class="heading">
                        <div class="heading1">
                            <h2 class="heading2">
                                <span>PHỤ KIỆN VÀ ĐỒ CHƠI</span></h2>
                            <span class="heading3">
                                <img src="/images/TopBike---V2.png" /></span> <a href="#" class="prev" style="float: right;
                                    margin-right: 35px;">
                                    <img src="/images/prev.png" width="13px" height="30px" alt="Previous" /></a>
                            <a href="#" class="next" style="float: right; margin-right: -26px; margin-top: 2px;">
                                <img src="/images/next.png" width="13px" height="30px" alt="Next" /></a>
                        </div>
                    </div>
                    <div class="foo-new-product">
                        <asp:Repeater ID="Repeater1" runat="server">
                            <ItemTemplate>
                                <div class="product">
                                    <a href='/san-pham/<%#SES.CMS.Ultility.Change_AV(Eval("ProductTitle").ToString())%>-<%#Eval("ProductID")%>'>
                                        <img src='/Media/<%#Eval("ProductImage") %>' alt='/Media/<%#Eval("ProductImage") %>' />
                                    </a><a href='/san-pham/<%#SES.CMS.Ultility.Change_AV(Eval("ProductTitle").ToString())%>-<%#Eval("ProductID")%>'>
                                        <p style="color: #0940a7; font-size: 13px">
                                            <%#Eval("ProductTitle") %></p>
                                    </a>
                                    <div class="giohang">
                                        <p style="color: #f71010; font-size: 13px; font-weight: bold; padding-top: 2px">
                                            <%#Eval("Price","{0:0,0}") %></p>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <div class="clear">
                    </div>
                </li>
            </ul>--%>
        </div>
    </div>
    <%--    <script src="/js/easyzoom.min.js"></script>
    <script>
        // Start easyZoom
        var $zoom = $('#zoom-target').easyZoom({
            parent: 'div.zoom-container'
        });
    </script>--%>
</asp:Content>
